<template>
    <view :style="themeColor()">
        <view class="bg-[var(--page-bg-color)] min-h-[100vh]" v-if="!loading">

            <view class="text-[#fff] w-full" :style="headerStyle">
                <!-- #ifdef MP-WEIXIN || APP-PLUS -->
                <top-tabbar :data="param" :scrollBool="topTabarObj.getScrollBool()" class="top-header" />
                <!-- #endif -->

                <view class="pt-[40rpx]  flex items-center relative z-[20] mx-[30rpx] mb-[36rpx]">
                    <image class="w-[90rpx] h-[90rpx] rounded-[50%]" v-if="info.headimg" :src="img(info.headimg)" mode="aspectFill" />
                    <image class="w-[90rpx] h-[90rpx] rounded-[50%]" v-else :src="img('addon/shop_fenxiao/index/head.png')" mode="aspectFill" />
                    <text class="ml-[20rpx] text-[30rpx] truncate w-[300rpx] text-[#333] font-500 leading-[1.2]">{{ info?.username }}</text>
                </view>

                <view class="relative level-content sidebar-margin">
                    <view class="flex items-center ml-[10rpx]">
                        <view class="flex items-baseline mr-[10rpx]">
                            <image class="w-[30rpx] h-[24rpx]" :src="img('addon/shop_fenxiao/level/level_key.png')" mode="widthFix" />
                            <text class="text-[#333] font-500 text-[24rpx] -ml-[7rpx]">{{ info?.fenxiao_level?.level_num - 100 }}</text>
                        </view>
                        <text class="ml-[6rpx] mr-[10rpx] text-[#333] font-500 text-[30rpx] truncate max-w-[200rpx]">{{ info?.fenxiao_level?.level_name }}</text>
                        <text class="rounded-[50rpx] h-[36rpx] flex-center px-[16rpx] text-[20rpx] text-[#F7D6A7] bg-[#38311F]">已解锁</text>
                        <image class="w-[230rpx] h-[200rpx] right-[40rpx] -top-[130rpx] absolute" :src="img('addon/shop_fenxiao/level/level_icon.png')" mode="aspectFill" />
                    </view>

                    <view v-if="levelList[currIndex + 1]" class="text-[var(--text-color-light9)] mt-[20rpx] flex items-center ml-[10rpx]">
                        <text class="text-[var(--text-color-light9)] text-[24rpx]">满足以下全部条件即可升级</text>
                        <text class="text-[var(--text-color-light9)] text-[24rpx]">为{{ levelList[currIndex + 1].level_name }}</text>
                        <view class="flex items-center text-[24rpx] ml-[16rpx] price-font">
                            <text class="text-[#CD6C00]">{{ levelInfo.complete > levelInfo.task_num ? levelInfo.task_num : levelInfo.complete }}</text>
                            <text class="text-[var(--text-color-light9)]">/{{ levelInfo.task_num }}</text>
                        </view>
                    </view>

                    <view class="flex my-[50rpx] ml-[10rpx]">
                        <view class="flex-1 text-left">
                            <view class="text-[var(--text-color-light9)] text-[24rpx]">团队消费收益</view>
                            <view class="mt-[16rpx] price-font font-500 text-[#D97E1D] text-[36rpx]">
                                {{ info?.fenxiao_level?.commission_rate }}
                                <text class="text-[24rpx] ml-[4rpx]">%</text>
                            </view>
                        </view>
                    </view>

                    <scroll-view scroll-y="true" class="flex flex-col upgrade-content bg-[#fff] rounded-[var(--rounded-mid)] px-[20rpx] py-[30rpx] box-border" v-if="levelInfo && levelInfo.task">
                        <view class="flex items-center justify-between" :class="{'pb-[40rpx]': (index != levelInfo.task.length-1)}" v-for="(item, index) in levelInfo.task" :key="index">
                            <view class="flex flex-col flex-1">
                                <text class="text-[28rpx] text-[#333] font-500">{{ item.title }}</text>
                                <view class="mt-[10rpx] mb-[12rpx] rounded-[12rpx] overflow-hidden">
                                    <progress :percent="item.progress" activeColor="#D97E1D" backgroundColor="#FAF0E5" stroke-width="4" />
                                </view>
                                <view class="flex items-center justify-between min-h-[34rpx]">
                                    <text class="text-[22rpx] text-[var(--text-color-light9)] price-font">{{ item.desc }}</text>
                                    <view class="flex items-center text-[28rpx] price-font">
                                        <text class="text-[#D97E1D]">{{ Number(item.value) }}</text>
                                        <text class="text-[#bbb]">/{{ Number(item.condition) }}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <text class="rounded-[20rpx] mt-[100rpx] h-[80rpx] flex-center text-[24rpx] text-[#F7D6A7] bg-[#38311F]" @click="redirect({ url: '/addon/shop_fenxiao/pages/promote' })">去邀请</text>
                    </scroll-view>
                </view>
            </view>
            <ns-goods-recommend />

        </view>
        <loading-page :loading="loading" />
    </view>
</template>

<script setup lang="ts">
import { img, redirect } from '@/utils/common';
import { ref, computed, watch } from 'vue'
import { getRangeLevel } from "@/app/api/member";
import { topTabar } from '@/utils/topTabbar'
import nsGoodsRecommend from '@/addon/shop/components/ns-goods-recommend/ns-goods-recommend.vue';
import useMemberStore from '@/stores/member'
const memberStore = useMemberStore()

/********* 自定义头部 - start ***********/
const topTabarObj = topTabar()
const param = ref(topTabarObj.setTopTabbarParam({ title: '团队等级', topStatusBar: { textColor: '#333' } }))
/********* 自定义头部 - end ***********/

const headerStyle = computed(() => {
    return {
        backgroundImage: 'url(' + img('addon/shop_fenxiao/level/level_top_bg.png') + ') ',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat'
    }
})
const currIndex = ref(0);
//个人信息
const info = computed(() => {
    return memberStore.info;
})

watch(() => info.value, (newVal) => {
    if (newVal?.member_id) {
        setTimeout(() => {
            getLevelListFn();
        }, 100);
    }
}, { immediate: true })

const loading = ref<boolean>(true);
const levelList = ref<any>([]);
const currLevel = ref<any>({});


const levelInfo = computed(() => {
    if (levelList.value.length && levelList.value[currIndex.value + 1]) {
        let level: any = levelList.value[currIndex.value + 1];
        level.task = [];
        level.complete = 0;
        let yj = parseFloat(level.team_sales_requirement); // 业绩要求
        let zt = level.direct_distributors_required; // 直推人数
        let xd = level.direct_distributors_xian; // 县代数
        let sd = level.direct_distributors_shi; // 市代数
        if (yj > 0) {
            let task = {
                title: '团队业绩',
                desc: '团队业绩大于等于' + yj + '元',
                condition: yj,
                value: info.value.total_team_consume,
                progress: parseFloat(info.value.total_team_consume) > yj ? 100 : (parseFloat(info.value.total_team_consume) / yj * 100).toFixed(2)
            }
            if (task.progress == 100) level.complete += 1;
            level.task.push(task);
        }
        if (zt > 0) {
            let task = {
                title: '直推分销商',
                desc: '直推分销商人数大于等于' + zt + '人',
                condition: zt,
                value: info.value.direct_distributors,
                progress: info.value.direct_distributors > zt ? 100 : (info.value.direct_distributors / zt * 100).toFixed(2)
            }
            if (task.progress == 100) level.complete += 1;
            level.task.push(task);
        }
        if (xd > 0) {
            let xian = levelList.value.length > 4 ? levelList.value[4] : ''
            let task = {
                title: '直推及其下属团队' + xian.level_name,
                desc: '直推及其下属团队' + xian.level_name + '人数大于等于' + xd + '人',
                condition: xd,
                value: info.value.direct_county_distributors,
                progress: info.value.direct_county_distributors > xd ? 100 : (info.value.direct_county_distributors / xd * 100).toFixed(2)
            }
            if (task.progress == 100) level.complete += 1;
            level.task.push(task);
        }
        if (sd > 0) {
            let shi = levelList.value.length > 5 ? levelList.value[5] : ''
            let task = {
                title: '直推及其下属团队' + shi.level_name,
                desc: '直推及其下属团队' + shi.level_name + '人数大于等于' + sd + '个',
                condition: sd,
                value: info.value.direct_city_distributors,
                progress: info.value.direct_city_distributors > sd ? 100 : (info.value.direct_city_distributors / sd * 100).toFixed(2)
            }
            if (task.progress == 100) level.complete += 1;
            level.task.push(task);
        }
        level.task_num = level.upgrade_type == 1 ? 1 : level.task.length;
        return level;
    }
})

// 等级列表
const getLevelListFn = () => {
    loading.value = true;
    try {
        getRangeLevel({type: 2}).then((res: any) => {
            levelList.value = res.data.data;
            levelList.value.forEach((item: any, index: number) => {
                if (item.level_id == info.value?.fenxiao_level?.level_id) {
                    currIndex.value = index;
                    currLevel.value = item;
                }
            })
        })
    } finally {
        loading.value = false;
    }
}
</script>

<style lang="scss" scoped>
.level-item-width {
    width: calc(100% - 30px);
    margin: 0 13px;
}

.level-wrap {
    transition: all .5s;
    display: flex;
    flex-direction: column;
    padding: 30rpx 40rpx;
    box-sizing: border-box;
    position: relative;
}

.level-card-one {
    background: linear-gradient(90deg, #FFB266, #FFD399);
}

.upgrade-content {
    max-height: calc(100vh - 320px);
}

.level-content {
    padding: var(--pad-top-m) var(--pad-sidebar-m);
    border: 2rpx solid #FFB948;
    border-radius: var(--rounded-big);
    background: linear-gradient(49deg, #FFF2DD 0%, #FEF9F0 49%, #FFF2DD 100%), linear-gradient(90deg, #FDF4E6 0%, #FFF9EF 50%, #FDF4E6 100%), linear-gradient(90deg, #FFE5BF 0%, #FDF2E4 50%, #FFE5BF 100%);
}
</style>
